/*
 * @Author: 飞越疯人院 353362604@qq.com
 * @Date: 2022-06-17 10:53:37
 * @LastEditors: 飞越疯人院 353362604@qq.com
 * @LastEditTime: 2023-01-11 11:24:02
 * @FilePath: \adminstration\src\Common\Modal\Modal.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import {
    Modal,
    Button,
    message,
    Result,
    Form,
    Input,
    notification,
    Popconfirm,
    Spin,
    Select,
    DatePicker,
    Tree,
    InputNumber,
    List,
} from 'antd'
import { useCallback, useEffect, useRef, useState } from 'react'
import { ProCard, useLatest } from '@ant-design/pro-components'
import { useSize, useEventEmitter, useRequest, useBoolean, useSessionStorageState } from 'ahooks'
import { Http } from '../Api'
import { API_LIST } from '../Api/Api'
import { Player, BigPlayButton } from 'video-react'
import { Initialization } from '../Scenes/Mars3d/Mars3d'
import { saveAs } from 'file-saver'
import { BuiltInData } from './config'
import { Line } from '@ant-design/plots'
// 字段设置
import { FieldList, SetField } from './SetField'
// form表单
import { FormAssembly } from '../Form/Form'
import { Video, DaHuaCameraPlayback } from '../Configure/Video'
import axios from 'axios'
import dayjs from 'dayjs'

// import { LivePage } from '../../Common/Options/HLSSource'
import { LiveBox } from '../../Pages/Front/Common/Options/HLSSource'

const { mars3d, GC } = window
const { TextArea } = Input

GC.Spread.Common.CultureManager.culture('zh-cn')

// 配置字段弹窗
export const FieldModal = ({ ModalRecord, Off }) => {
    const [Data, setData] = useState({})
    useEffect(() => setData(ModalRecord), [ModalRecord])
    const [ModalHeight, setModalHeight] = useState(0)
    const BoxSize = useSize(document.getElementsByClassName('ModalTitle')[0])
    useEffect(() => {
        if (BoxSize) setModalHeight(BoxSize.height)
    }, [BoxSize])
    const FieldSelectEvent = useEventEmitter()
    return (
        <Modal
            className="ModalTitle"
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            width={`80vw`}
            title={`${Data.tableName} 控制器字段参数 `}
        >
            <ProCard className="SplitScreen" split="vertical">
                <ProCard colSpan="300px" ghost>
                    <FieldList
                        FieldSelectEvent={FieldSelectEvent}
                        ModalHeight={ModalHeight}
                        FiledParameter={Data.targetUrl}
                    />
                </ProCard>
                <ProCard>
                    <SetField FieldSelectEvent={FieldSelectEvent} ModalHeight={ModalHeight} />
                </ProCard>
            </ProCard>
        </Modal>
    )
}

// 新增数据弹窗
export const OperationModal = ({ ModalRecord, Off, ModifyData, actionRef, AddTo, uuid }) => {
    const [Data, setData] = useState({})
    useEffect(() => setData(ModalRecord), [ModalRecord])
    return (
        <Modal
            className="ModalTitle"
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            width={`80vw`}
            title={Data.title}
            centered
        >
            <FormAssembly url={Data.url} data={ModifyData} Off={Off} actionRef={actionRef} AddTo={AddTo} uuid={uuid} />
        </Modal>
    )
}

// 弹出确认窗口
export const DeleteConfirmModal = ({ ModalRecord, Off, ModifyData, actionRef, AdditionalData, PPPEvent }) => {
    const [Data, setData] = useState({})
    useEffect(() => setData(ModalRecord), [ModalRecord])
    const { runAsync } = useRequest(Http, { manual: true })
    const SubmitFunction = tips => {
        message.success(tips)
        if (PPPEvent) PPPEvent.emit('删除成功')
        actionRef?.current?.reload()
        setTimeout(() => Off(), 500)
    }
    return (
        <Modal
            className="ModalTitle"
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            title={Data.title}
            centered
        >
            <div className="confirm">
                {(() => {
                    switch (Data.key) {
                        case 'delete':
                            return (
                                <div className="delete">
                                    <div>警告</div>
                                    <div>删除后数据不可恢复</div>
                                    <div>
                                        <Button onClick={Off} size="large">
                                            取消
                                        </Button>
                                        <Button
                                            type="primary"
                                            danger
                                            size="large"
                                            onClick={() => {
                                                const url =
                                                    Data.url.substring(0, 3) === 'del' ? Data.url : `del${Data.url}`
                                                if (!AdditionalData) AdditionalData = []
                                                runAsync({ url, path: [ModifyData, ...AdditionalData] }).then(() =>
                                                    SubmitFunction('数据删除成功'),
                                                )
                                                // .catch(() => message.error('数据删除失败'))
                                            }}
                                        >
                                            删除
                                        </Button>
                                    </div>
                                </div>
                            )
                        case 'submit':
                            return (
                                <div className="delete">
                                    <div>警告</div>
                                    <div>{Data?.content ? Data.content : '提交后附件将不可修改'} </div>
                                    <div>
                                        <Button onClick={Off} size="large">
                                            取消
                                        </Button>
                                        <Button
                                            type="primary"
                                            size="large"
                                            onClick={() => {
                                                if (!AdditionalData) AdditionalData = []
                                                runAsync({ url: Data.url, path: [ModifyData, ...AdditionalData] })
                                                    .then(() => SubmitFunction('提交成功'))
                                                    .catch(() => message.error('提交失败'))
                                            }}
                                        >
                                            {Data?.ok ? Data.ok : '提交'}
                                        </Button>
                                    </div>
                                </div>
                            )
                        case 'examine':
                            return (
                                <div className="delete">
                                    <div>提示</div>
                                    <div>请认真审核信息</div>
                                    <div>
                                        <Button
                                            type="primary"
                                            danger
                                            size="large"
                                            onClick={() => {
                                                const { api, notOk } = Data.url
                                                runAsync({ url: api, path: [ModifyData, notOk] })
                                                    .then(() => SubmitFunction('审核成功'))
                                                    .catch(() => message.error('审核失败'))
                                            }}
                                        >
                                            {Data.url.notText || '驳回'}
                                        </Button>
                                        <Button
                                            type="primary"
                                            size="large"
                                            onClick={() => {
                                                const { api, oK } = Data.url
                                                runAsync({ url: api, path: [ModifyData, oK] })
                                                    .then(() => SubmitFunction('审核成功'))
                                                    .catch(() => message.error('审核失败'))
                                            }}
                                        >
                                            {Data.url.okText || '通过'}
                                        </Button>
                                    </div>
                                </div>
                            )
                        case 'accept':
                            return (
                                <div className="delete">
                                    <div>提示</div>
                                    <div>如对审核结果有任何疑义,请联系管理员</div>
                                    <div>
                                        <Button size="large" onClick={Off}>
                                            取消
                                        </Button>
                                        <Button
                                            type="primary"
                                            size="large"
                                            onClick={() => {
                                                runAsync({ url: Data.url, path: [ModifyData] })
                                                    .then(() => SubmitFunction('接受成功'))
                                                    .catch(() => message.error('接受失败'))
                                            }}
                                        >
                                            接受
                                        </Button>
                                    </div>
                                </div>
                            )
                        case 'review':
                            return (
                                <div className="delete">
                                    <div>提示</div>
                                    <div>请对信息仔细校验并审核</div>
                                    <div>
                                        <Button
                                            type="primary"
                                            danger
                                            size="large"
                                            onClick={() => {
                                                Off()
                                            }}
                                        >
                                            取消
                                        </Button>
                                        <Button
                                            type="primary"
                                            size="large"
                                            onClick={() => {
                                                const { api, data } = Data.url
                                                runAsync({ url: api, data, path: [ModifyData] })
                                                    .then(() => SubmitFunction('审核成功'))
                                                    .catch(() => message.error('审核失败'))
                                            }}
                                        >
                                            通过
                                        </Button>
                                    </div>
                                </div>
                            )
                        case 'input':
                            return <div>12</div>
                        default:
                            break
                    }
                })()}
            </div>
        </Modal>
    )
}

// 查看附件
export const SeeEnclosureModal = ({ data, Off }) => {
    const { className, url } = data
    const ImageBox = ({ url }) => <img src={url} alt={url} />
    const PdfBox = ({ url }) => <embed src={url} />
    const VideoBox = ({ url }) => (
        <Player fluid={false} width={'100%'} height={'100%'} playsInline src={url}>
            <BigPlayButton position="center" />
        </Player>
    )
    const OtherBox = () => <Result status="500" title="文件格式不支持预览" />
    const LiveVideo = ({ url }) => <LiveBox live={url} />
    const [type, setType] = useState('ImageBox')
    const AttachmentList = { ImageBox, PdfBox, VideoBox, OtherBox, LiveVideo }
    useEffect(() => {
        var suffix = url.substring(url.lastIndexOf('.') + 1).toLowerCase()
        if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif') setType('ImageBox')
        else if (suffix === 'pdf') setType('PdfBox')
        else if (suffix === 'mp4') setType('VideoBox')
        else if (suffix === 'm3u8') setType('LiveVideo')
        else setType('OtherBox')
    }, [url])

    return (
        <Modal
            className={`appendix ${className}`}
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            title="附件信息"
            centered
            width={'80vw'}
        >
            <div className="Enclosure">
                {(() => {
                    const Template = AttachmentList[type]
                    return <Template url={url} />
                })()}
            </div>
        </Modal>
    )
}

// 修改密码
export const ModifyPassWord = ({ Off }) => {
    const [{ userName, userUuid }] = useSessionStorageState('UserInfo')
    const { runAsync } = useRequest(Http, { manual: true })
    const [Loading, { setTrue, setFalse }] = useBoolean(false)
    return (
        <Modal
            className="ModalTitle"
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            title="修改密码"
            centered
        >
            <div className="ModifyPassWord">
                <Form
                    layout="horizontal"
                    className="ModifyPasswordForm"
                    name="basic"
                    autoComplete="off"
                    onFinish={e => {
                        setTrue()
                        const { oldPassword, newPassword } = e
                        runAsync({
                            url: 'posUserChangePassword',
                            data: { userName, userUuid, oldPassword, newPassword },
                        })
                            .then(res => {
                                notification.success({ message: `密码修改成功!`, duration: 2 })
                                Off()
                            })
                            .catch(setFalse)
                    }}
                >
                    <Form.Item
                        name="oldPassword"
                        label="原登录密码"
                        rules={[{ required: true, message: '必须填写原登录密码!' }]}
                    >
                        <Input.Password placeholder="请输入登录账户" />
                    </Form.Item>

                    <Form.Item
                        name="newPassword"
                        label="设置新密码"
                        rules={[{ required: true, message: '必须填写新登录密码' }]}
                    >
                        <Input.Password placeholder="请输入新的登录密码" />
                    </Form.Item>

                    <Form.Item
                        name="confirm"
                        label="重复新密码"
                        dependencies={['newPassword']}
                        rules={[
                            { required: true, message: '必须验证新密码' },
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    if (!value || getFieldValue('newPassword') === value) return Promise.resolve()
                                    return Promise.reject(new Error('您输入的两个密码不匹配！'))
                                },
                            }),
                        ]}
                    >
                        <Input.Password placeholder="请确认新的登录密码" />
                    </Form.Item>

                    <Form.Item className="SignUpBtn">
                        <Button block type="primary" htmlType="submit" loading={Loading}>
                            {Loading ? '提交中...' : '提交'}
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </Modal>
    )
}

// 打开excel
export const OpenExcelModal = ({ Off, data }) => {
    const [ExcelName, setExcelName] = useState([])
    const [spread, setSpread] = useState()
    const ExcelBox = useRef()

    const saveExcel = () => {
        const excelIo = new GC.Spread.Excel.IO()
        excelIo.save(spread.toJSON(), e => saveAs(e, ExcelName))
    }
    const submitExcel = () => {
        const excelIo = new GC.Spread.Excel.IO()
        excelIo.save(spread.toJSON(), e => {
            const forms = new FormData()
            const { type } = e
            const file = new File([e], ExcelName, { type })
            const { SampleItemUuid, TestTypeUuid, LabReportTemplatesUuid } = data
            const url = `${
                API_LIST()['posSampleItemUploadTestDataEXCEL']
            }?SampleItemUuid=${SampleItemUuid}&TestTypeUuid=${TestTypeUuid}&LabReportTemplatesUuid=${LabReportTemplatesUuid}`
            forms.append('File', file)
            forms.append('FileType', 3)
            axios.post(url, forms).then(() => message.success('文件上传成功'))
        })
    }

    useEffect(() => {
        const spread = new GC.Spread.Sheets.Workbook(ExcelBox.current, { sheetCount: 1 })
        setSpread(spread)
        axios
            .get(API_LIST()['getSampleItemGetTestDataEXCEL'], { params: data, responseType: 'blob' })
            .then(({ data, headers }) => {
                let textName = ''
                const nameArr = headers['content-disposition'].split(';')
                nameArr.forEach(item => {
                    if (item.indexOf("filename*=UTF-8''") !== -1)
                        textName = decodeURI(item.split("filename*=UTF-8''")[1])
                })
                setExcelName(textName)
                const excelIo = new GC.Spread.Excel.IO()
                excelIo.open(data, workbookObj => spread.fromJSON(workbookObj))
            })
    }, [data])

    return (
        <Modal
            className="ModalTitle"
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            title="试验参数信息管理"
            centered
            width={'80vw'}
        >
            <div className="OpenExcel">
                <div className="Excel" ref={ExcelBox} />
                <div className="options">
                    <Button onClick={saveExcel}>本地下载</Button>
                    <Button type="primary" onClick={submitExcel}>
                        上传数据
                    </Button>
                </div>
            </div>
        </Modal>
    )
}

export const OpenExcelUrlModal = ({ Off, url, className, title, data }) => {
    const [ExcelName, setExcelName] = useState([])
    const [spread, setSpread] = useState()
    const ExcelBox = useRef()

    const saveExcel = () => {
        const excelIo = new GC.Spread.Excel.IO()
        excelIo.save(spread.toJSON(), e => saveAs(e, ExcelName))
    }

    useEffect(() => {
        const spread = new GC.Spread.Sheets.Workbook(ExcelBox.current, { sheetCount: 1 })
        setSpread(spread)
        axios.get(url, { params: data, responseType: 'blob' }).then(({ data, headers }) => {
            let textName = ''
            const nameArr = headers['content-disposition']?.split(';')
            nameArr.forEach(item => {
                if (item.indexOf("filename*=UTF-8''") !== -1) textName = decodeURI(item.split("filename*=UTF-8''")[1])
            })
            setExcelName(textName)
            const excelIo = new GC.Spread.Excel.IO()
            excelIo.open(data, workbookObj => spread.fromJSON(workbookObj))
        })
    }, [url, data])
    return (
        <Modal
            className={`ModalTitle ${className}`}
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            title={title}
            centered
            width={'80vw'}
        >
            <div className="OpenExcel">
                <div className="Excel" ref={ExcelBox} />
                <div className="options">
                    <Button onClick={saveExcel}>本地下载</Button>
                </div>
            </div>
        </Modal>
    )
}

// 位置选择窗口
export const AddressSelectModal = ({ Off, title, record, api, data }) => {
    const { runAsync: getData } = useRequest(Http, { manual: true })
    const [MapSetUp] = useState({
        // 场景Scene
        sceneMode: 3,
        highDynamicRange: true,
        fxaa: true,
        showSun: true,
        showMoon: true,
        showSkyBox: true,
        backgroundColor: 'rgba(24,144,255,0.5)',
        showSkyAtmosphere: true,
        fog: true,
        backgroundImage: 'none',
        sceneSkyBox: 0,
        // 地球Globe
        show: true,
        terrainExaggeration: 1,
        enableLighting: false,
        showGroundAtmosphere: true,
        depthTestAgainstTerrain: false,
        basemaps: true,
        baseColor: 'rgba(24,144,255,1)',
        basemap: 2002,
        layer: [],
        // 鼠标交互
        enableZoom: true,
        enableTilt: true,
        enableRotate: true,
        enableTranslate: true,
        constrainedAxis: true,
        enableCollisionDetection: true,
        minimumCollisionTerrainHeight: 15000,
        minimumZoomDistance: 1,
        maximumZoomDistance: 50000000,
        zoomFactor: 3,
        // 系统控件
        geocoder: true,
        homeButton: true,
        baseLayerPicker: true,
        fullscreenButton: false,
        zoom: false,
        // 自定义控件
        layerManagement: false,
        // 面板
        locationBar: false,
        compass: false,
        distanceLegend: false,
        // 雾天
        fogEffect: false,
        fogEffectColor: '#f8f8f8',
        fogByDistanceX: 1,
        fogByDistanceZ: 100,
        // 雨天
        rainEffect: false,
        rainEffectSpeed: 10,
        rainEffectSize: 20,
        rainEffectDirection: -30,
        // 雪天
        snowEffect: false,
        snowEffectSpeed: 20,
        // 积雪
        snowCover: false,
        snowCoverAlpha: 0.6,
        // 场景效果
        outlineEffect: false,
        bloomTargetEffect: false,
        bloomEffect: false,
        brightnessEffect: false,
        nightVisionEffect: false,
        blackAndWhiteEffect: false,
        mosaicEffect: false,
        depthOfField: false,
    })
    const MapBox = useRef()
    const [Position, setPosition] = useState([])
    const [loading, { setTrue, setFalse }] = useBoolean(false)
    const DrawPoint = useCallback(
        ({ map, gra, position }) => {
            gra.clear()
            setPosition(position)
            const company = new mars3d.graphic.BillboardEntity({
                position,
                style: {
                    image: 'https://image.ljkjkf.com/intellisiteSystem_TieKe/Style/Billboard/小三角.png',
                    clampToGround: true,
                    visibleDepth: false,
                    label: {
                        text: record.tableName,
                        font_size: 18,
                        color: 'red',
                        pixelOffsetY: -40,
                        outline: true,
                        outlineColor: '#f8f8f8',
                        outlineWidth: 2,
                        clampToGround: true,
                        visibleDepth: false,
                    },
                },
            })
            gra.addGraphic(company)
            map.flyToGraphic(company, { radius: 8000 })
        },
        [record.tableName],
    )

    useEffect(() => {
        const { map, gra } = Initialization({ MapBox, Scene: MapSetUp, Layer: {} })
        getData({ url: 'getProjectInfoInfo', path: [record.uuid] }).then(res => {
            if (res) DrawPoint({ map, gra, position: res.projectCompanyCoordinate })
        })
        map.on('click', e => {
            map.setCursor(false)
            const cartesian = e.cartesian
            const { lng, lat, alt } = mars3d.LngLatPoint.fromCartesian(cartesian)
            DrawPoint({ map, gra, position: [lng, lat, alt], record })
        })
    }, [DrawPoint, MapSetUp, record, getData])
    const { runAsync: putData } = useRequest(Http, { manual: true })
    const SaveAddress = () => {
        setTrue()
        let data = { organizationUuid: record.uuid, projectCompanyCoordinate: Position }
        putData({ url: api, data })
            .then(() => {
                message.success('保存成功')
                setFalse()
            })
            .catch(setFalse)
    }
    return (
        <Modal
            className="ModalTitle MapBoxModal"
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            title={title}
            centered
            width={'80vw'}
        >
            <Spin spinning={loading}>
                <div className="MapBox" ref={MapBox}>
                    {Position.length !== 0 && (
                        <div className="SaveAddress">
                            <Popconfirm
                                title="保存后将覆盖已有位置信息"
                                onConfirm={SaveAddress}
                                okText="保存"
                                cancelText="取消"
                            >
                                <Button type="primary">保存位置</Button>
                            </Popconfirm>
                        </div>
                    )}
                </div>
            </Spin>
        </Modal>
    )
}

// 输入框键入
export const InputModal = ({ Off }) => {
    return <div>123</div>
}

// 考勤审核
export const Attendance = () => {
    return <div>123</div>
}

// 试验数据处理意见弹出层
export const LabHandleModal = ({ Off, api, uuid, OptionsEvent, groupId }) => {
    const { userName: handleUserName } = JSON.parse(sessionStorage.getItem('UserInfo'))
    const [LabHandleType, setLabHandleType] = useState([])
    const { runAsync: getLabHandleType } = useRequest(Http, { manual: true })
    const { runAsync: putLabHandleModal } = useRequest(Http, { manual: true })
    useEffect(() => {
        getLabHandleType({ url: 'getLabHandleType' }).then(({ list }) => setLabHandleType(list))
    }, [getLabHandleType])
    const [remark, setRemark] = useState()
    const [handleTime, setHandleTime] = useState()
    const [labHandleTypeUuid, setLabHandleTypeUuid] = useState()
    const [Loading, { setTrue, setFalse }] = useBoolean(false)

    const Submit = () => {
        if (!labHandleTypeUuid) {
            message.error('请选择处理意见类型!')
            return
        }
        if (!remark) {
            message.error('请选择处理意见说明!')
            return
        }
        setTrue()
        let data = {
            uuid,
            groupId,
            labHandleTypeUuid,
            handleUserName,
            remark,
            handleTime: handleTime || dayjs().format('YYYY-MM-DD HH:mm:ss'),
        }
        putLabHandleModal({ url: api, data, path: [uuid] })
            .then(() => {
                OptionsEvent.emit({ key: 'OK', value: '处理成功' })
                Off()
            })
            .catch(setFalse)
    }
    return (
        <Modal
            className="ModalTitle"
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            title="试验数据处理意见"
            centered
            width={800}
        >
            <div className="LabHandleModal">
                <div className="From">
                    <div>意见类型 : </div>
                    <div>
                        <Select
                            fieldNames={{ label: 'tableName', value: 'uuid' }}
                            placeholder="请选择处理意见类型"
                            style={{ width: '100%' }}
                            options={LabHandleType}
                            onChange={e => setLabHandleTypeUuid(e)}
                        />
                    </div>
                </div>
                <div className="From">
                    <div>处理意见内容 : </div>
                    <div>
                        <TextArea rows={6} placeholder="请输入处理意见内容" onChange={e => setRemark(e.target.value)} />
                    </div>
                </div>
                <div className="From">
                    <div>处理时间 : </div>
                    <div>
                        <DatePicker
                            style={{ width: '100%' }}
                            showTime
                            onChange={e => setHandleTime(dayjs(e).format('YYYY-MM-DD HH:mm:ss'))}
                        />
                    </div>
                </div>
                <div className="Btn">
                    <Button type="primary" loading={Loading} onClick={Submit}>
                        {Loading ? '提交中...' : '提交处理意见'}
                    </Button>
                </div>
            </div>
        </Modal>
    )
}

// 试验数据曲线
export const LabTestCurve = ({ Off, data, type, className }) => {
    const [ChartsData, setChartsData] = useState()
    const ChartsSetUp = (data, text, width = 800, height = 600) => {
        return {
            data,
            width,
            height,
            autoFit: false,
            appendPadding: 32,
            xField: 'date',
            yField: 'value',
            xAxis: {
                title: { text: '时间/s', position: 'end', offset: -20, style: { fill: '#3BACE9', fontSize: 12 } },
            },
            yAxis: {
                title: {
                    text,
                    position: 'end',
                    offset: -20,
                    spacing: 10,
                    autoRotate: false,
                    style: { fill: '#3BACE9', fontSize: 12 },
                },
            },
        }
    }
    useEffect(() => {
        let param = data.split(',').map((item, index) => ({ date: index, value: Number(item) }))
        setChartsData(ChartsSetUp(param, type))
    }, [data, type])

    return (
        <Modal
            className={`ModalTitle ${className}`}
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            title="试验数据走势图"
            centered
            width={800}
        >
            {ChartsData && <Line {...ChartsData} />}
        </Modal>
    )
}

// 钢筋保护层
export const LabCoverProtectorModal = ({ Off, uuid, className }) => {
    const [ChartsData, setChartsData] = useState()
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let [{ designThickness, designThickness1, designThickness2, curve }] = list
            let data = curve.split(',').map((item, index) => ({ date: index, value: Number(item) }))
            const config = {
                data,
                width: 800,
                height: 600,
                autoFit: false,
                color: '#37C8CA',
                xField: 'date',
                yField: 'value',
                annotations: [
                    {
                        type: 'line',
                        start: ['start', designThickness],
                        end: ['end', designThickness],
                        text: {
                            content: `设计厚度 ${designThickness}`,
                            position: 'right',
                            offsetY: 18,
                            style: { fill: '#7143EA', textAlign: 'right' },
                        },
                        style: { lineDash: [1, 1], stroke: '#7143EA' },
                    },
                    {
                        type: 'line',
                        start: ['start', designThickness1],
                        end: ['end', designThickness1],
                        text: {
                            content: `设计厚度上限 ${designThickness1}`,
                            position: 'right',
                            offsetY: 18,
                            style: { fill: '#5AAAE5', textAlign: 'right' },
                        },
                        style: { lineDash: [2, 2], stroke: '#5AAAE5' },
                    },
                    {
                        type: 'line',
                        start: ['start', designThickness2],
                        end: ['end', designThickness2],
                        text: {
                            content: `设计厚度下限 ${designThickness2}`,
                            position: 'right',
                            offsetY: 18,
                            style: { fill: '#EA8B3B', textAlign: 'right' },
                        },
                        style: { lineDash: [2, 2], stroke: '#EA8B3B' },
                    },
                ],
            }
            setChartsData(config)
        },
    })

    useEffect(() => {
        runAsync({ url: 'getLabCoverProtectorGetLabCoverProtectorsList', data: { uuid } })
    }, [uuid, runAsync])

    return (
        <Modal
            className={`ModalTitle ${className}`}
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            title="钢筋保护层数据详情"
            centered
            width={1000}
        >
            {ChartsData && <Line {...ChartsData} />}
        </Modal>
    )
}

// 试验室 - 回弹仪数据
export const LabReboundHammerModal = ({ Off, uuid, className }) => {
    const [Data, setData] = useState()
    const [DataLength, setDataLength] = useState(1)

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            const [{ reboundData }] = list
            setDataLength(reboundData.split(',').length)
            setData(list)
        },
    })

    useEffect(() => {
        runAsync({ url: 'getLabReboundHammerGetLabReboundHammerAreaNo', data: { uuid } })
    }, [uuid, runAsync])

    const [Title] = useState([
        { uuid: '1', flex: 1, title: '测区' },
        { uuid: '2', title: '回弹值 - Ri' },
        { uuid: '3', flex: 2, title: '构件强度' },
        { uuid: '4', flex: 2, title: '回弹平均值 - Rm' },
        { uuid: '5', flex: 2, title: '碳化深度值 /mm' },
        { uuid: '6', flex: 1, title: '碳化平均值' },
    ])

    const [color] = useState(['#FF2020', '#15ADFF'])

    return (
        <Modal
            className={`ModalTitle ${className}`}
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            title="回弹仪详细数据"
            centered
            width={1200}
        >
            <div className="LabReboundHammerModal">
                <div className="Title">
                    {DataLength &&
                        Title.map(({ uuid, title, flex }) => {
                            if (uuid === '2') {
                                return (
                                    <div key={uuid} style={{ flex: DataLength }}>
                                        <div>{title}</div>
                                        <div>
                                            {[...new Array(DataLength).keys()].map(key => (
                                                <div key={key}>{key + 1}</div>
                                            ))}
                                        </div>
                                    </div>
                                )
                            } else {
                                return (
                                    <div key={uuid} style={{ flex }}>
                                        {title}
                                    </div>
                                )
                            }
                        })}
                </div>
                <div className="List">
                    {Data &&
                        Data.map(
                            ({
                                areaNo,
                                carbonizationAvg,
                                carbonationDepthofcomponents,
                                componentStrength,
                                reboundData,
                                reboundAvg,
                            }) => (
                                <div key={areaNo}>
                                    <div style={{ flex: Title[0].flex }}> {areaNo} </div>
                                    <div style={{ flex: DataLength }}>
                                        {(() => {
                                            const arr = reboundData.split(',')
                                            const orj = arr.map((item, index) => ({ number: index, value: item }))
                                            orj.sort((a, b) => a.value.localeCompare(b.value))
                                            const smallArr = [orj.at(1).number, orj.at(2).number, orj.at(3).number]
                                            const bigArr = [orj.at(-1).number, orj.at(-2).number, orj.at(-3).number]
                                            return arr.map((item, index) => (
                                                <div
                                                    key={index}
                                                    style={{
                                                        color:
                                                            bigArr.indexOf(index) !== -1
                                                                ? color[0]
                                                                : smallArr.indexOf(index) !== -1
                                                                ? color[1]
                                                                : className
                                                                ? '#f8f8f8'
                                                                : '#262626',
                                                        fontWeight:
                                                            bigArr.indexOf(index) !== -1 ||
                                                            smallArr.indexOf(index) !== -1
                                                                ? '900'
                                                                : '100',
                                                    }}
                                                >
                                                    {item}
                                                </div>
                                            ))
                                        })()}
                                    </div>
                                    <div style={{ flex: Title[2].flex }}>{componentStrength}</div>
                                    <div style={{ flex: Title[3].flex }}>{reboundAvg}</div>
                                    <div style={{ flex: Title[4].flex }}>{carbonizationAvg}</div>
                                    <div style={{ flex: Title[5].flex }}>{carbonationDepthofcomponents}</div>
                                </div>
                            ),
                        )}
                </div>
                <div className="tip">
                    <div>
                        * <span style={{ color: color[0] }}>红色</span>高亮为最大值,
                        <span style={{ color: color[1] }}>蓝色</span>高亮为最小值
                    </div>
                    <div>* 回弹值除去三个最大值和三个最小值后计算出回弹平均值</div>
                </div>
            </div>
        </Modal>
    )
}

// !!! 项目管理 - 公司文件菜单
export const ProjectFileMenuModal = ({ Off, record, title, APIList }) => {
    const OrgUuid = record.organizationUuid || record.uuid
    const [TreeList, setTreeList] = useState()
    const [SelectList, setSelectList] = useState([])
    const SelectListLast = useLatest(SelectList)
    const { runAsync: getPPPListTree } = useRequest(Http, { manual: true })
    const { runAsync: getOrganizationPppList } = useRequest(Http, { manual: true })
    const { runAsync: posOrganizationPppListBatch } = useRequest(Http, { throttleWait: 800, manual: true })
    const [GetTree, GetORGTree, PutBatch, ListName] = APIList

    useEffect(() => {
        getPPPListTree({ url: GetTree }).then(tree => {
            getOrganizationPppList({ url: GetORGTree, data: { organizationUuid: OrgUuid } }).then(({ list }) => {
                let data = list.map(item => ({
                    [ListName]: item[ListName],
                    planAttachmentCount: item.planAttachmentCount,
                }))
                setSelectList(data)
                setTreeList(tree)
            })
        })
    }, [getPPPListTree, getOrganizationPppList, GetTree, GetORGTree, ListName, OrgUuid])

    const SubmitPPPList = () => {
        posOrganizationPppListBatch({
            url: PutBatch,
            data: SelectList,
            path: [OrgUuid],
        }).then(() => message.success('文件内容修改成功'))
    }
    return (
        <Modal
            className="ModalTitle"
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            title={title}
            centered
            width={1200}
        >
            <div className="ProjectFileMenuModal">
                {TreeList && APIList.length !== 0 && (
                    <>
                        <Tree
                            fieldNames={{ title: 'tableName', key: 'uuid' }}
                            treeData={TreeList}
                            defaultExpandAll={true}
                            titleRender={e => {
                                const { uuid, tableName, lowLevel } = e
                                let data = SelectListLast.current
                                return (
                                    <div>
                                        {lowLevel === 0 ? (
                                            <div className="NumberInput">
                                                <div>{tableName}</div>

                                                <InputNumber
                                                    min={0}
                                                    onBlur={e => {
                                                        const value = Number(e.target.value)
                                                        if (data.findIndex(v => v[APIList.at(-1)] === uuid) !== -1) {
                                                            data.find(
                                                                v => v[APIList.at(-1)] === uuid,
                                                            ).planAttachmentCount = value
                                                        } else {
                                                            data = [
                                                                ...data,
                                                                { [APIList.at(-1)]: uuid, planAttachmentCount: value },
                                                            ]
                                                        }
                                                        setSelectList(data)
                                                    }}
                                                    defaultValue={
                                                        data.find(v => v[APIList.at(-1)] === uuid)
                                                            ?.planAttachmentCount || 0
                                                    }
                                                />
                                            </div>
                                        ) : (
                                            <div> {tableName} </div>
                                        )}
                                    </div>
                                )
                            }}
                        />
                    </>
                )}
            </div>
            <div className="SubmitBtn">
                <Button type="primary" onClick={SubmitPPPList}>
                    提交数据
                </Button>
            </div>
        </Modal>
    )
}

// 查看试验监控画面
export const SeeLabVideoModal = ({ Off, data }) => {
    const [VideoList, setVideoList] = useState([])

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => setVideoList(res.list),
    })

    useEffect(() => {
        const { originalDataTable, organizationUuid, startTime, endTime, testDate } = data
        runAsync({
            url: 'getLabDataCameraByOriginalDataTable',
            data: {
                originalDataTable,
                organizationUuid,
                startTime,
                endTime,
                testDate,
            },
        })
    }, [data, runAsync])

    return (
        <Modal
            className="ModalTitle"
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            title="试验室监控画面"
            centered
            width={'80vw'}
        >
            <div className="SeeLabVideoModalBox">
                {VideoList.length !== 0 ? (
                    <div className="SeeLabVideoModalScroll" style={{ width: VideoList?.length * 800 }}>
                        {VideoList.map((item, index) => (
                            <div key={index}>
                                {(() => {
                                    const { cameraFactory, startTime, endTime } = item
                                    if (cameraFactory === 1) {
                                        const begin = dayjs(startTime).format('YYYYMMDDHHmmss')
                                        const end = dayjs(endTime).format('YYYYMMDDHHmmss')
                                        return (
                                            <Video
                                                data={item}
                                                date={new Date().getTime()}
                                                playback={`&begin=${begin}&end=${end}`}
                                            />
                                        )
                                    } else {
                                        return <DaHuaCameraPlayback data={item} />
                                    }
                                })()}
                            </div>
                        ))}
                    </div>
                ) : (
                    <div className="SeeLabVideoModalResult">
                        <Result status="500" title="暂无监控数据" />
                    </div>
                )}
            </div>
        </Modal>
    )
}
// 沥青级配
export const AsphaltCurveDatasModal = ({ Off, uuid, className }) => {
    const [ChartsData, setChartsData] = useState()
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let dataInfo = list.map(item => ({
                data: [
                    {
                        date: '0.075',
                        type:
                            item.curveType === '1'
                                ? '上限'
                                : item.curveType === '2'
                                ? '下限'
                                : item.curveType === '3'
                                ? '理论'
                                : '实际',
                        value: item.sieve075,
                    },
                    {
                        date: '0.15',
                        type:
                            item.curveType === '1'
                                ? '上限'
                                : item.curveType === '2'
                                ? '下限'
                                : item.curveType === '3'
                                ? '理论'
                                : '实际',
                        value: item.sieve15,
                    },
                    {
                        date: '0.3',
                        type:
                            item.curveType === '1'
                                ? '上限'
                                : item.curveType === '2'
                                ? '下限'
                                : item.curveType === '3'
                                ? '理论'
                                : '实际',
                        value: item.sieve30,
                    },
                    {
                        date: '0.6',
                        type:
                            item.curveType === '1'
                                ? '上限'
                                : item.curveType === '2'
                                ? '下限'
                                : item.curveType === '3'
                                ? '理论'
                                : '实际',
                        value: item.sieve60,
                    },
                    {
                        date: '1.18',
                        type:
                            item.curveType === '1'
                                ? '上限'
                                : item.curveType === '2'
                                ? '下限'
                                : item.curveType === '3'
                                ? '理论'
                                : '实际',
                        value: item.sieve118,
                    },
                    {
                        date: '2.36',
                        type:
                            item.curveType === '1'
                                ? '上限'
                                : item.curveType === '2'
                                ? '下限'
                                : item.curveType === '3'
                                ? '理论'
                                : '实际',
                        value: item.sieve236,
                    },
                    {
                        date: '4.75',
                        type:
                            item.curveType === '1'
                                ? '上限'
                                : item.curveType === '2'
                                ? '下限'
                                : item.curveType === '3'
                                ? '理论'
                                : '实际',
                        value: item.sieve475,
                    },
                    {
                        date: '9.5',
                        type:
                            item.curveType === '1'
                                ? '上限'
                                : item.curveType === '2'
                                ? '下限'
                                : item.curveType === '3'
                                ? '理论'
                                : '实际',
                        value: item.sieve950,
                    },
                    {
                        date: '13.2',
                        type:
                            item.curveType === '1'
                                ? '上限'
                                : item.curveType === '2'
                                ? '下限'
                                : item.curveType === '3'
                                ? '理论'
                                : '实际',
                        value: item.sieve1320,
                    },
                    {
                        date: '16',
                        type:
                            item.curveType === '1'
                                ? '上限'
                                : item.curveType === '2'
                                ? '下限'
                                : item.curveType === '3'
                                ? '理论'
                                : '实际',
                        value: item.sieve1600,
                    },
                    {
                        date: '19',
                        type:
                            item.curveType === '1'
                                ? '上限'
                                : item.curveType === '2'
                                ? '下限'
                                : item.curveType === '3'
                                ? '理论'
                                : '实际',
                        value: item.sieve1900,
                    },
                    {
                        date: '26.5',
                        type:
                            item.curveType === '1'
                                ? '上限'
                                : item.curveType === '2'
                                ? '下限'
                                : item.curveType === '3'
                                ? '理论'
                                : '实际',
                        value: item.sieve2650,
                    },
                    {
                        date: '31.5',
                        type:
                            item.curveType === '1'
                                ? '上限'
                                : item.curveType === '2'
                                ? '下限'
                                : item.curveType === '3'
                                ? '理论'
                                : '实际',
                        value: item.sieve3150,
                    },
                ],
            }))
            let dataParam = [...dataInfo[0].data, ...dataInfo[1].data, ...dataInfo[2].data, ...dataInfo[3].data]
            const config = {
                data: dataParam,
                width: 800,
                height: 600,
                autoFit: false,
                xField: 'date',
                yField: 'value',
                yAxis: {
                    title: { text: '（%）', position: 'end', autoRotate: false, offset: 50 },
                },
                seriesField: 'type',
                color: ({ type }) => {
                    return type === '上限'
                        ? '#EDC240'
                        : type === '下限'
                        ? '#AFD8F8'
                        : type === '理论'
                        ? '#CB4B4B'
                        : '#4EAB4E'
                },
            }
            setChartsData(config)
        },
    })

    useEffect(() => {
        runAsync({ url: 'getAsphaltCurveData', data: { dataNumber: uuid } })
    }, [uuid, runAsync])

    return (
        <Modal
            className={`ModalTitle ${className}`}
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            title="沥青级配数据详情"
            centered
            width={1000}
        >
            {ChartsData && <Line {...ChartsData} />}
        </Modal>
    )
}
// 拌合站处理意见弹出层
export const CementMixingStationsModal = ({ Off, api, uuid, OptionsEvent, groupId }) => {
    const { userName: handleUserName } = JSON.parse(sessionStorage.getItem('UserInfo'))
    const [LabHandleType, setLabHandleType] = useState([])
    const { runAsync: getMixPlatHandleType } = useRequest(Http, { manual: true })
    const { runAsync: putLabHandleModal } = useRequest(Http, { manual: true })
    useEffect(() => {
        getMixPlatHandleType({ url: 'getMixPlatHandleType' }).then(({ list }) => setLabHandleType(list))
    }, [getMixPlatHandleType])
    const [remark, setRemark] = useState()
    const [handleTime, setHandleTime] = useState()
    const [labHandleTypeUuid, setLabHandleTypeUuid] = useState()
    const [Loading, { setTrue, setFalse }] = useBoolean(false)

    const Submit = () => {
        if (!labHandleTypeUuid) {
            message.error('请选择处理意见类型!')
            return
        }
        if (!remark) {
            message.error('请选择处理意见说明!')
            return
        }
        setTrue()
        let data = {
            uuid,
            groupId,
            labHandleTypeUuid,
            handleUserName,
            remark,
            handleTime: handleTime || dayjs().format('YYYY-MM-DD HH:mm:ss'),
        }
        putLabHandleModal({ url: api, data, path: [uuid] })
            .then(() => {
                OptionsEvent.emit({ key: 'OK', value: '处理成功' })
                Off()
            })
            .catch(setFalse)
    }
    return (
        <Modal
            className="ModalTitle"
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            title="处理意见"
            centered
            width={800}
        >
            <div className="LabHandleModal">
                <div className="From">
                    <div>意见类型 : </div>
                    <div>
                        <Select
                            fieldNames={{ label: 'tableName', value: 'uuid' }}
                            placeholder="请选择处理意见类型"
                            style={{ width: '100%' }}
                            options={LabHandleType}
                            onChange={e => setLabHandleTypeUuid(e)}
                        />
                    </div>
                </div>
                <div className="From">
                    <div>处理意见内容 : </div>
                    <div>
                        <TextArea rows={6} placeholder="请输入处理意见内容" onChange={e => setRemark(e.target.value)} />
                    </div>
                </div>
                <div className="From">
                    <div>处理时间 : </div>
                    <div>
                        <DatePicker
                            style={{ width: '100%' }}
                            showTime
                            onChange={e => setHandleTime(dayjs(e).format('YYYY-MM-DD HH:mm:ss'))}
                        />
                    </div>
                </div>
                <div className="Btn">
                    <Button type="primary" loading={Loading} onClick={Submit}>
                        {Loading ? '提交中...' : '提交处理意见'}
                    </Button>
                </div>
            </div>
        </Modal>
    )
}

// 录入资金支出明细
export const ProjectBuildingPaymentStatModal = ({ OptionsEvent, url, title, Off }) => {
    const [ItemList, setItemList] = useState([])
    const [OrgList, setOrgList] = useState([])
    const [OrgSelect, setOrgSelect] = useState()
    const [Date, setData] = useState(dayjs())

    const ArrList = {
        ProjectBuildingPaymentStat: {
            getUrl: 'getProjectBuildingPaymentItem',
            posUrl: 'posProjectBuildingPaymentStatBatch',
            ItemUuid: 'projectBuildingPaymentItemUuid',
            type: 'projectBuildingPaymentType',
        },
        ProjectOperationPaymentStat: {
            getUrl: 'getProjectOperationPaymentItem',
            posUrl: 'posProjectOperationPaymentStatsBatch',
            ItemUuid: 'projectOperationPaymentItemUuid',
            type: 'projectOperationPaymentType',
        },
    }

    const { getUrl, posUrl, ItemUuid, type } = ArrList[url]

    const { runAsync: getProjectBuildingPaymentItem } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setItemList(
                res.list.map(item => ({
                    [ItemUuid]: item.uuid,
                    code: item.code,
                    remark: item.remark,
                    tableName: item.tableName,
                    amount: 0,
                    type: item[type],
                    typeName: BuiltInData[type][item[type]],
                    actualDate: dayjs().format('YYYY-MM-DD'),
                })),
            )
        },
    })
    const { runAsync: getOrganizationIdentityLevel } = useRequest(Http, {
        manual: true,
        onSuccess: res => setOrgList(res.list),
    })

    const { runAsync: posProjectBuildingPaymentStatBatch } = useRequest(Http, { manual: true })

    useEffect(() => {
        getProjectBuildingPaymentItem({ url: getUrl, data: { OrderField: 'code@asc' } })
        getOrganizationIdentityLevel({ url: 'getOrganizationIdentityLevel', path: [4] })
    }, [getProjectBuildingPaymentItem, getOrganizationIdentityLevel, getUrl])

    const Submit = () => {
        if (!OrgSelect) {
            message.error('请先选择项目')
            return false
        }
        let data = ItemList.filter(v => v.amount > 0)
        if (data.length === 0) {
            message.error('请至少添加一项数据')
            return false
        }
        data.forEach(item => (item.actualDate = dayjs(Date).format('YYYY-MM-DD')))
        posProjectBuildingPaymentStatBatch({
            url: posUrl,
            data,
            path: [OrgSelect],
        }).then(res => {
            OptionsEvent.emit({ key: 'OK', value: '添加成功' })
            Off()
        })
    }

    return (
        <Modal
            className="ModalTitle"
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            title={title}
            centered
            width={1200}
        >
            <div className="ProjectBuildingPaymentStatModal">
                <div>
                    <Select
                        showSearch={true}
                        placeholder="请选择项目"
                        style={{ width: '100%', marginBottom: 8 }}
                        fieldNames={{ label: 'tableName', value: 'uuid' }}
                        options={OrgList}
                        filterOption={(input, option) =>
                            (option?.tableName ?? '').toLowerCase().includes(input.toLowerCase())
                        }
                        onChange={e => setOrgSelect(e)}
                    />
                    <DatePicker
                        style={{ width: '100%', marginBottom: 8 }}
                        value={Date}
                        placeholder="请选择时间"
                        onChange={setData}
                    />
                </div>

                {ItemList.length === 0 ? (
                    <div>暂无清单数据</div>
                ) : (
                    <List
                        header={
                            <div className="Header">
                                <div>清单名称</div>
                                <div>
                                    <div>类型</div>
                                    <div>金额</div>
                                    {/* <div>时间</div> */}
                                </div>
                            </div>
                        }
                        size="small"
                        bordered
                        dataSource={ItemList}
                        renderItem={item => (
                            <List.Item>
                                <div className="Title">{item.tableName}</div>
                                <div className="Type">{item.typeName}</div>
                                <div className="Input">
                                    <InputNumber
                                        value={item.amount}
                                        placeholder="请输入金额"
                                        onChange={e => {
                                            ItemList.find(v => v[ItemUuid] === item[ItemUuid]).amount = e
                                            setItemList([...ItemList])
                                        }}
                                    />
                                    {/* <DatePicker
                                        value={dayjs(item.actualDate)}
                                        placeholder="请选择时间"
                                        onChange={e => {
                                            ItemList.find(v => v[ItemUuid] === item[ItemUuid]).actualDate =
                                                dayjs(e).format('YYYY-MM-DD')
                                            console.log(ItemList)
                                            setItemList([...ItemList])
                                        }}
                                    /> */}
                                </div>
                            </List.Item>
                        )}
                    />
                )}
                <div className="Submit">
                    <Button type="primary" onClick={Submit}>
                        提交
                    </Button>
                </div>
            </div>
        </Modal>
    )
}

export const SelectModal = ({ Off, title, options, SelectEvent }) => {
    const data = Object.keys(options).map(item => ({ label: options[item], value: item }))
    const [org, setOrg] = useState()
    const submit = () => {
        if (org) SelectEvent.emit(org)
    }

    return (
        <Modal
            className="ModalTitle"
            open={true}
            footer={null}
            maskClosable={false}
            onCancel={Off}
            destroyOnClose
            title={title}
            centered
            width={800}
        >
            <div style={{ width: '100%' }}>
                <Select style={{ width: '100%', marginBottom: 16 }} options={data} onChange={e => setOrg(e)} />
                <Button block type="primary" onClick={submit}>
                    保存设置
                </Button>
            </div>
        </Modal>
    )
}
